<template>
<div style="padding: 10px 20px;height: auto; ">
    <h1 style="font-size: 24px;">角色权限</h1>
<div style="width: 50%;height: 100vh;margin: auto;">
        <el-card >
                <el-select v-model="query.role_id" placeholder="请选择角色" style="width: 240px;">
                    <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <!--  复选框，选择事件-->
                <el-checkbox-group v-model="query.works" style="margin-top: 20px;margin-bottom: 20px;"placeholder="请选择工作流" >
                    <el-checkbox v-for="item in workflow" :key="item.id" :value="item.id">{{ item.name }}</el-checkbox>
                </el-checkbox-group>
                <el-button type="primary" @click="onSubmittal">提交</el-button>
                <el-button @click="reset_data" >重置</el-button>
                <el-button @click="return_data">返回</el-button>
        </el-card>
    </div>
</div>
  </template>
  
  <script setup>
  import http from "../../http"
  import {onMounted, ref} from 'vue'
  import {ElMessage} from "element-plus";
  import router from "../../router";
  
  const query = ref({
    role_id: '',
    works: []
  })
  const options = ref([])
  const workflow = ref([])
  
  onMounted(() => {
    http.get('/app/role/get_role/').then(
        res => {
          console.log(res.data)
          options.value = res.data.data
        }
    )
    http.get('/app/workflow/').then(
        res => {
          console.log(res.data)
          workflow.value = res.data
        }
    )
  })
  
  const reset_data = () => {
    query.value = {
      role_id: '',
      works: []
    }
    ElMessage.success("哈哈，我已经成功重置辣~")
  }
  const return_data = () => {
    // window.history.back()
    ElMessage.success("快点给我添加返回吧~~~~~~~")
  }
  
  const onSubmittal = () => {
    // 处理提交逻辑
    console.log(query.value)
    if (query.value.role_id === '' || query.value.works.length === 0) {
      ElMessage.error('请选择角色和流程')
    } else {
      const data = {
        role_id: query.value.role_id,
        works: query.value.works.map(id => ({id}))
      }
      http.post('/app/workflow_role/add_per/', data).then(
          res => {
            console.log(data)
            console.log(res.data)
            // ElMessage.success(res.data.msg)
            if (res.data.msg === "该角色已拥有该工作流权限，请勿重复添加") {
              ElMessage.warning("该角色已拥有该工作流权限，请勿重复添加")
            } else {
              localStorage.setItem('data', JSON.stringify(data))
              router.push('/work_approval')
              ElMessage.success("添加成功")
            }
          }
      ).catch(
          error => {
            console.error(error)
            ElMessage.error('提交失败')
          }
      )
    }
  }
  </script>
  <style scoped>
</style>
  